<template>
  <Row :gutter="10">
    <i-col span="24">
        <div>
          <vxe-toolbar :refresh="{query: reload}" export print custom>
            <template v-slot:buttons>
              <vxe-button size="mini" icon="vxe-icon--plus" content="新增"></vxe-button>
              <vxe-button size="mini" status="danger" icon="vxe-icon--error" style="margin-left: 10px;" content="批量删除"></vxe-button>
              <vxe-input v-model="search" class="my-search" placeholder="输入关键字搜索" style="margin-left: 10px;">
                <template v-slot:suffix>
                  <vxe-button size="mini" status="info" content="搜索"></vxe-button>
                </template>
              </vxe-input>
            </template>
            <template v-slot:tools>
              <a href="">高级搜索</a>
            </template>
          </vxe-toolbar>
          <vxe-table
            size="mini"
            style="margin-top: 10px;"
            id="toolbar_demo3"
            round
            :custom-config="{storage: true}"
            :data="tableData">
            <vxe-table-column field="id" title="#" width="60"></vxe-table-column>
            <vxe-table-column type="checkbox" width="60"></vxe-table-column>
            <vxe-table-column field="name" title="Name"></vxe-table-column>
            <vxe-table-column field="age" title="Age" sortable></vxe-table-column>
            <vxe-table-column field="sex" title="Sex" :filters="[{value:'0',label:'女'},{value:'1',label:'男'}]"></vxe-table-column>
            <vxe-table-column field="sex2" title="Sex2" sortable :filters="[{value:'0',label:'女'},{value:'1',label:'男'}]" :filter-multiple="false"></vxe-table-column>
            <vxe-table-column field="address" title="Address" show-overflow>
              <template v-slot:default="{row}">
                {{row.address}}
              </template>
            </vxe-table-column>
          </vxe-table>
          <div style="margin-top: 10px;">
            <Page :total="100" show-elevator show-total show-sizer />
          </div>
        </div>
      <Spin size="large" fix v-if="spinShow"></Spin>
    </i-col>
  </Row>
</template>

<script>
import PasteEditor from '_c/paste-editor'
export default {
  name: 'index',
  components: {
    PasteEditor
  },
  data () {
    return {
      search: '',
      spinShow: false,
      tableData: [
        { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'vxe-table 从入门到放弃' },
        { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
        { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
        { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women ', age: 23, address: 'vxe-table 从入门到放弃' },
        { id: 10005, name: 'Test5', role: 'Develop', sex: 'Women ', age: 30, address: 'Shanghai' },
        { id: 10006, name: 'Test6', role: 'Designer', sex: 'Women ', age: 21, address: 'vxe-table 从入门到放弃' },
        { id: 10007, name: 'Test7', role: 'Test', sex: 'Man ', age: 29, address: 'vxe-table 从入门到放弃' },
        { id: 10008, name: 'Test8', role: 'Develop', sex: 'Man ', age: 35, address: 'vxe-table 从入门到放弃' }
      ]
    }
  },
  methods: {
    reload () {
      console.log('重新读取')
    }
  }
}
</script>

<style scoped>

</style>
